<style lang="scss" scoped>
  .edit-class {
    font-size: 1.2em;
    margin-top: 0.2em;
    margin-right: 0.4em;
    color: #15A4FA;
    cursor: pointer;
  }

  .del-class {
    font-size: 1.2em;
    color: rgb(217, 83, 79);
    cursor: pointer;
  }
  .h-button{
    display: inline-block;
    height: 100px;
    width: 100px;
    background: none;
    border-radius: 5px;
    box-shadow: none;
    border: 1px solid #dfdfdf;
    padding: 0 0 20px;
    overflow:hide;
  img{
    width: 50%;
    margin: 10px auto;
  }
  span{
    display: inline-block;
    width: 100%;
    line-height: 30px;
    color: #fff;
  }
  }
  .control{
    .label{
      display: inline-block;
      margin: 0 10px;
    }
  }
  .has-addons{
    height:30px;
  span{
    position:absolute;
    right:0;
  label{
    width: auto;
    height: 30px;
    display: inline-block;
    margin: 0 10px;
    line-height: 30px;
  }
  }
  }
  td,th{

    text-align: center;
  }
</style>
<style>
  .cell-bl-6{
    width: 16.2%;
    display: inline-block;
    text-align: center;
  }
</style>
<template>
  <main>
    <section style="padding-bottom: 80px">
      <div class="box">
        <p class="control has-addons">
          <span>
            <label for="">IP:</label><input class="input" type="text" placeholder="">
            <label for="">时间段:</label><datepicker :inputClass="{ test: true }"></datepicker>
            <label for=""> 至 </label><datepicker :inputClass="{ test: true }"></datepicker>
            <a class="button is-info">查询</a>
          </span>
        </p>
      </div>
      <div class="tile is-ancestor animated">
        <div class="tile is-parent is-6">
          <article class="tile is-child box">
            <p class="title is-6">主机组名称:</p>
          </article>
        </div>
        <div class="tile is-parent is-6">
          <article class="tile is-child box">
            <p class="title is-6">安全分值:</p>
          </article>
        </div>
      </div>
      <div class="control is-horizontal">
        <label class="label">主机组成员:</label>
        <div class="control">
          <textarea class="textarea" placeholder=""></textarea>
        </div>
      </div>
      <h1 class="title is-4">系统预警</h1>
      <div class="box">
        <div class="cell-bl-6">
          <tooltip label="入侵风险" placement="top">
            <button class="h-button has-text-centered">
              <span class="button is-warning">入侵风险</span>
              <img src="../../assets/home/icon_01.jpg" alt="">
            </button>
          </tooltip>
        </div>
        <div class="cell-bl-6">
          <tooltip label="DDOS攻击" placement="top">
            <button class="h-button has-text-centered">
              <span class="button is-danger">DDOS攻击</span>
              <img src="../../assets/home/icon_02.jpg" alt="">
            </button>
          </tooltip>
        </div>
        <div class="cell-bl-6">
          <tooltip label="网络异常" placement="top">
            <button class="h-button has-text-centered">
              <span class="button is-info">网络异常</span>
              <img src="../../assets/home/icon_03.jpg" alt="">
            </button>
          </tooltip>
        </div>
        <div class="cell-bl-6">
          <tooltip label="合格" placement="top">
            <button class="h-button has-text-centered">
              <span class="button is-primary">合格</span>
              <img src="../../assets/home/icon_04.jpg" alt="">
            </button>
          </tooltip>
        </div>
        <div class="cell-bl-6">
          <tooltip label="数据泄漏" placement="top">
            <button class="h-button has-text-centered">
              <span class="button is-info">数据泄漏</span>
              <img src="../../assets/home/icon_05.jpg" alt="">
            </button>
          </tooltip>
        </div>
        <div class="cell-bl-6">
          <tooltip label="性能异常" placement="top">
            <button class="h-button has-text-centered">
              <span class="button is-danger">性能异常</span>
              <img src="../../assets/home/icon_06.jpg" alt="">
            </button>
          </tooltip>
        </div>
      </div>
      <div class="tile is-ancestor">
        <div class="tile is-parent is-6">
          <article class="tile is-child box">
            <h4 class="title is-4">日志报错</h4>
            <chart :type="'radar'" :data="waveData" :options="options"></chart>
          </article>
        </div>
        <div class="tile is-parent is-6">
          <article class="tile is-child box">
            <h4 class="title is-4">网络流量</h4>
            <chart :type="'bar'" :data="waveData" :options="options"></chart>
          </article>
        </div>
      </div>

      <div class="tile is-ancestor">
        <div class="tile is-parent is-6">
          <article class="tile is-child box">
            <h4 class="title is-4">用户内部行为</h4>
            <chart :type="'radar'" :data="seriesData" :options="options_3"></chart>
          </article>
        </div>
        <div class="tile is-parent is-6">
          <article class="tile is-child box">
            <h4 class="title is-4">用户外部行为</h4>
            <chart :type="'line'" :data="seriesData" :options="options_3"></chart>
          </article>
        </div>
      </div>
      <h4 class="title is-4">组内流量分析</h4>
      <div class="tile is-ancestor animated">
        <div class="tile is-parent is-3">
          <article class="tile is-child box">
            <div class="block is-flex">
              <collapse>
                <collapse-item title="Components">
                  <ul>
                    <li>1</li>
                    <li>1</li>
                    <li>1</li>
                    <li>1</li>
                  </ul>
                </collapse-item>
                <collapse-item title="Elements">
                  <ul>
                    <li>1</li>
                    <li>1</li>
                    <li>1</li>
                    <li>1</li>
                  </ul>
                </collapse-item>
                <collapse-item title="Nests">
                  <collapse>
                    <collapse-item title="Nest Child">
                      <ul>
                        <li>1</li>
                        <li>1</li>
                        <li>1</li>
                        <li>1</li>
                      </ul>
                    </collapse-item>
                  </collapse>
                </collapse-item>
              </collapse>
            </div>
          </article>
        </div>
        <div class="tile is-parent is-9">
          <article class="tile is-child box">
            <div class="table-responsive">
              <table class="table is-bordered is-striped is-narrow">
                <thead>
                <tr>
                  <th>Duration</th>
                  <th>Search Subject</th>
                  <th>Port/Protocol</th>
                  <th>Traffic Summary</th>
                  <th>Port/Protocol</th>
                  <th>Peer</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td class="is-icon">
                    start:2017-7-1 12:00<br>
                    end:2017-7-1 13:00<br>
                    Duration 6s
                  </td>
                  <td>
                    10.9.173.12
                  </td>
                  <td>
                    676767/TCP
                  </td>
                  <td>
                    343KB|98packets<br>
                    <i class="fa fa-long-arrow-left "></i><br>
                    HTTPS<br>
                    <i class="fa fa-long-arrow-right"></i><br>
                    343KB|98packets
                  </td>
                  <td>
                    start:2017-7-1 12:00<br>
                    end:2017-7-1 13:00<br>
                    Duration 6s
                  </td>
                  <td>
                    12.0.9.87
                  </td>
                </tr>
                <tr>
                  <td class="is-icon">
                    start:2017-7-1 12:00<br>
                    end:2017-7-1 13:00<br>
                    Duration 6s
                  </td>
                  <td>
                    10.9.173.12
                  </td>
                  <td>
                    676767/TCP
                  </td>
                  <td>
                    343KB|98packets<br>
                    <i class="fa fa-long-arrow-left "></i><br>
                    HTTPS<br>
                    <i class="fa fa-long-arrow-right"></i><br>
                    343KB|98packets
                  </td>
                  <td>
                    start:2017-7-1 12:00<br>
                    end:2017-7-1 13:00<br>
                    Duration 6s
                  </td>
                  <td>
                    12.0.9.87
                  </td>
                </tr>
                <tr>
                  <td class="is-icon">
                    start:2017-7-1 12:00<br>
                    end:2017-7-1 13:00<br>
                    Duration 6s
                  </td>
                  <td>
                    10.9.173.12
                  </td>
                  <td>
                    676767/TCP
                  </td>
                  <td>
                    343KB|98packets<br>
                    <i class="fa fa-long-arrow-left "></i><br>
                    HTTPS<br>
                    <i class="fa fa-long-arrow-right"></i><br>
                    343KB|98packets
                  </td>
                  <td>
                    start:2017-7-1 12:00<br>
                    end:2017-7-1 13:00<br>
                    Duration 6s
                  </td>
                  <td>
                    12.0.9.87
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </article>
        </div>
      </div>

      <div class="tile is-ancestor">
        <div class="tile is-parent is-12">
          <article class="tile is-child box">
            <h4 class="title is-4">网络流量</h4>
            <echart style="width: 100%" :options="polar"></echart>
          </article>
        </div>
      </div>
    </section>



    <back-to-top target=".is-child .wysiwyg">
      <button class="button">UP</button>
    </back-to-top>
  </main>
</template>

<script>
  import { BackToTop } from 'vue-bulma-jump'
  import Tooltip from 'vue-bulma-tooltip'
  import Chart from 'vue-bulma-chartjs'
  import Echart from 'vue-echarts'
  import Datepicker from 'vue-bulma-datepicker'
  import { Collapse, Item as CollapseItem } from 'vue-bulma-collapse'
  export default {
    data () {
      return {
        isChecked: true,
        labels: ['Sleeping', 'Designing', 'Coding', 'Cycling'],
        data: [20, 40, 5, 35],

        polar: {
          title: {
            text: 'Graph 简单示例'
          },
          tooltip: {},
          animationDurationUpdate: 1500,
          animationEasingUpdate: 'quinticInOut',
          series : [
            {
              type: 'graph',
              layout: 'none',
              symbolSize: 50,
              roam: true,
              label: {
                normal: {
                  show: true
                }
              },
              edgeSymbol: ['circle', 'arrow'],
              edgeSymbolSize: [4, 10],
              edgeLabel: {
                normal: {
                  textStyle: {
                    fontSize: 20
                  }
                }
              },
              data: [{
                name: '节点1',
                x: 300,
                y: 300
              }, {
                name: '节点2',
                x: 800,
                y: 300
              }, {
                name: '节点3',
                x: 550,
                y: 100
              }, {
                name: '节点4',
                x: 550,
                y: 500
              }],
              // links: [],
              links: [{
                source: 0,
                target: 1,
                symbolSize: [5, 20],
                label: {
                  normal: {
                    show: true
                  }
                },
                lineStyle: {
                  normal: {
                    width: 5,
                    curveness: 0.2
                  }
                }
              }, {
                source: '节点2',
                target: '节点1',
                label: {
                  normal: {
                    show: true
                  }
                },
                lineStyle: {
                  normal: { curveness: 0.2 }
                }
              }, {
                source: '节点1',
                target: '节点3'
              }, {
                source: '节点2',
                target: '节点3'
              }, {
                source: '节点2',
                target: '节点4'
              }, {
                source: '节点1',
                target: '节点4'
              }],
              lineStyle: {
                normal: {
                  opacity: 0.9,
                  width: 2,
                  curveness: 0
                }
              }
            }
          ]
        },

        options: {
          segmentShowStroke: false
        },
        backgroundColor: [
          '#1fc8db',
          '#fce473',
          '#42afe3',
          '#ed6c63',
          '#97cd76'
        ],

        labels_2: ['April', 'May', 'June', 'Jule', 'August', 'September', 'October', 'November', 'December'],
        data_2: [1, 9, 3, 4, 5, 6, 7, 8, 2].map(e => (Math.sin(e) * 25) + 25),
        labels_3: ['May', 'June', 'Jule', 'August', 'September', 'October', 'November'],
        data_3: [
          [65, 59, 90, 81, 56, 55, 40],
          [28, 48, 40, 19, 88, 27, 45]
        ],
        options_3: {
          tooltips: {
            mode: 'label'
          }
        },
        backgroundColor_3: ['rgba(31, 200, 219, 1)', 'rgba(151, 205, 118, 1)'],
        series: ['Product A', 'Product B']
      }
    },
    methods: {
    },
    computed: {

      waveData () {
        return {
          labels: this.labels_2,
          datasets: [{
            label: 'My Radar',
            data: this.data_2,
            backgroundColor: this.backgroundColor[0]
          }]
        }
      },

      seriesData () {
        let data = {
          labels: this.labels_3
        }
        data.datasets = this.series.map((e, i) => {
          return {
            data: this.data_3[i],
            label: this.series[i],
            borderColor: this.backgroundColor_3[i].replace(/1\)$/, '.5)'),
            pointBackgroundColor: this.backgroundColor_3[i],
            backgroundColor: this.backgroundColor_3[i].replace(/1\)$/, '.5)')
          }
        })
        return data
      }
    },
    components: {BackToTop, Tooltip, Chart, Datepicker, echart: Echart, Collapse, CollapseItem},
    mounted () {
      this.$nextTick(function () {
        setInterval(() => {
          this.data_2.unshift(this.data_2.pop())
        }, 377)
      })
    }
  }
</script>
